<template>
  <view class="service-detail-page">
    <!-- 顶部导航栏 -->
    <view class="page-header">
      <view class="header-inner">
        <view class="back-btn" @click="handleBack">
          <FaIcon name="arrow-left" color="#1f2937" :size="36" />
        </view>
        <text class="header-title">服务详情</text>
        <view class="header-actions">
          <view class="action-btn" @click="handleToggleFavorite">
            <FaIcon :name="isFavorited ? 'heart' : 'heart-o'" :color="isFavorited ? '#ef4444' : '#1f2937'" :size="36" />
          </view>
          <view class="action-btn" @click="handleShare">
            <FaIcon name="share" color="#1f2937" :size="36" />
          </view>
        </view>
      </view>
    </view>

    <scroll-view scroll-y class="content-scroll">
      <!-- 图片轮播 -->
      <view class="image-section">
        <swiper class="image-swiper" :indicator-dots="true" :autoplay="true" :circular="true">
          <swiper-item v-for="(image, index) in serviceDetail.images" :key="index">
            <image :src="image" mode="aspectFill" class="swiper-image"></image>
          </swiper-item>
        </swiper>
        <view class="image-counter">
          <text class="counter-text">{{ currentImageIndex + 1 }} / {{ serviceDetail.images.length }}</text>
        </view>
      </view>

      <!-- 服务基本信息 -->
      <view class="info-section">
        <view class="info-card">
          <view class="info-main">
            <text class="service-title">{{ serviceDetail.title }}</text>
            <view class="tag-row">
              <view class="tag tag-category">{{ serviceDetail.category }}</view>
              <view class="tag tag-verified">认证商家</view>
            </view>
            <text class="service-desc">{{ serviceDetail.description }}</text>
          </view>
          
          <view class="info-footer">
            <view class="price-section">
              <text class="price">¥{{ serviceDetail.price }}/{{ serviceDetail.unit }}起</text>
            </view>
            <view class="stats-row">
              <text class="stat-item">
                <FaIcon name="eye" color="#9ca3af" :size="24" />
                {{ serviceDetail.views }}
              </text>
              <text class="stat-item">
                <FaIcon name="heart" color="#9ca3af" :size="24" />
                {{ serviceDetail.favorites }}
              </text>
            </view>
          </view>
        </view>
      </view>

      <!-- 服务内容详情 -->
      <view class="content-section">
        <view class="section-card">
          <view class="section-header">
            <FaIcon name="file-text-o" color="#10b981" :size="32" />
            <text class="section-title">服务内容</text>
          </view>
          <view class="content-body">
            <rich-text :nodes="serviceDetail.content" class="content-text"></rich-text>
          </view>
        </view>
      </view>

      <!-- 服务地区 -->
      <view class="area-section">
        <view class="section-card">
          <view class="section-header">
            <FaIcon name="map-marker" color="#10b981" :size="32" />
            <text class="section-title">服务地区</text>
          </view>
          <text class="area-text">{{ serviceDetail.serviceArea }}</text>
        </view>
      </view>

      <!-- 联系方式 -->
      <view class="contact-section">
        <view class="section-card">
          <view class="section-header">
            <FaIcon name="user-circle" color="#10b981" :size="32" />
            <text class="section-title">联系方式</text>
          </view>
          
          <view class="contact-list">
            <view class="contact-item">
              <view class="contact-icon">
                <FaIcon name="user" color="#6b7280" :size="28" />
              </view>
              <view class="contact-info">
                <text class="info-label">联系人</text>
                <text class="info-value">{{ serviceDetail.contact.name }}</text>
              </view>
            </view>
            
            <view class="contact-item">
              <view class="contact-icon">
                <FaIcon name="phone" color="#6b7280" :size="28" />
              </view>
              <view class="contact-info">
                <text class="info-label">联系电话</text>
                <text class="info-value">{{ serviceDetail.contact.phone }}</text>
              </view>
            </view>
            
            <view class="contact-item">
              <view class="contact-icon">
                <FaIcon name="clock-o" color="#6b7280" :size="28" />
              </view>
              <view class="contact-info">
                <text class="info-label">发布时间</text>
                <text class="info-value">{{ serviceDetail.publishTime }}</text>
              </view>
            </view>
            
            <view class="privacy-tip">
              <view class="tip-icon">
                <FaIcon name="shield" color="#d97706" :size="24" />
              </view>
              <view class="tip-content">
                <text class="tip-title">隐私保护提示</text>
                <text class="tip-desc">为保护双方隐私，联系方式已脱敏处理。点击"联系我"按钮并完成登录后可查看完整信息。</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 相似服务推荐 -->
      <view class="recommend-section">
        <view class="recommend-header">
          <FaIcon name="th-large" color="#10b981" :size="32" />
          <text class="recommend-title">相似服务推荐</text>
        </view>
        
        <view class="recommend-list">
          <view 
            v-for="item in similarServices" 
            :key="item.id"
            class="recommend-item"
            @click="handleViewSimilar(item)"
          >
            <image :src="item.image" mode="aspectFill" class="item-image"></image>
            <view class="item-content">
              <text class="item-title">{{ item.title }}</text>
              <text class="item-desc">{{ item.description }}</text>
              <text class="item-price">¥{{ item.price }}/{{ item.unit }}起</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部安全区 -->
      <view class="safe-bottom"></view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="bar-inner">
        <view class="icon-btn" @click="handleGoHome">
          <FaIcon name="home" color="#6b7280" :size="36" />
        </view>
        <view class="icon-btn" @click="handleGoList">
          <FaIcon name="list" color="#6b7280" :size="36" />
        </view>
        <button class="contact-btn" @click="handleContact">
          <FaIcon name="wechat" color="#ffffff" :size="32" style="margin-right: 12rpx;" />
          <text class="btn-text">联系我</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import FaIcon from '@/components/common/FaIcon.vue'

const serviceId = ref('')
const currentImageIndex = ref(0)
const isFavorited = ref(false)

// 服务详情数据
const serviceDetail = ref({
  id: 1,
  title: '专业农机服务 - 耕地播种一站式',
  category: '农机服务',
  description: '提供专业农机服务，包括耕地、播种、收割等全流程服务，设备先进，经验丰富',
  price: 200,
  unit: '亩',
  views: '1.2k',
  favorites: '86',
  images: [
    'https://images.unsplash.com/photo-1625246333195-78d9c38ad449?w=800&h=450&fit=crop',
    'https://images.unsplash.com/photo-1574943320219-553eb213f72d?w=800&h=450&fit=crop',
    'https://images.unsplash.com/photo-1625246165580-24b062e8c44d?w=800&h=450&fit=crop'
  ],
  content: `
    <p style="margin-bottom: 16px; color: #6b7280; line-height: 1.6;">我们提供全方位的农机服务，专注于为农户提供高效、专业的农业机械化解决方案。</p>
    
    <p style="margin-bottom: 12px; font-weight: 500; color: #1f2937;">服务项目包括：</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">• 耕地翻土 - 采用大型拖拉机和深耕犁，耕作深度可达30cm</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">• 播种服务 - 精密播种机，确保种子均匀分布</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">• 收割服务 - 联合收割机，高效快捷</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">• 施肥服务 - 自动化施肥设备，精准控制用量</p>
    
    <p style="margin-top: 16px; margin-bottom: 12px; font-weight: 500; color: #1f2937;">服务优势：</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">• 设备先进 - 所有机械均为近3年内购置的新型设备</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">• 团队专业 - 操作人员均有5年以上工作经验</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">• 服务范围广 - 覆盖周边100公里范围</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">• 价格合理 - 明码标价，无隐藏收费</p>
    
    <p style="margin-top: 16px; margin-bottom: 12px; font-weight: 500; color: #1f2937;">服务流程：</p>
    <p style="color: #6b7280; line-height: 1.8;">1. 联系我们进行需求咨询<br>2. 实地勘察并制定作业方案<br>3. 签订服务协议<br>4. 按约定时间进场作业<br>5. 作业完成验收付款</p>
  `,
  serviceArea: '山东省济宁市嘉祥县及周边地区',
  contact: {
    name: '张**',
    phone: '138****5678'
  },
  publishTime: '2024年12月10日 14:30'
})

// 相似服务
const similarServices = ref([
  {
    id: 2,
    title: '农业机械租赁服务',
    description: '提供各类农业机械租赁',
    price: 150,
    unit: '天',
    image: 'https://images.unsplash.com/photo-1574943320219-553eb213f72d?w=80&h=80&fit=crop'
  },
  {
    id: 3,
    title: '大棚建设安装服务',
    description: '专业大棚设计建设团队',
    price: 500,
    unit: '平米',
    image: 'https://images.unsplash.com/photo-1625246165580-24b062e8c44d?w=80&h=80&fit=crop'
  }
])

onLoad((options) => {
  if (options.id) {
    serviceId.value = options.id
    // TODO: 根据ID加载服务详情
  }
})

// 事件处理
const handleBack = () => {
  uni.navigateBack()
}

const handleToggleFavorite = () => {
  isFavorited.value = !isFavorited.value
  uni.showToast({
    title: isFavorited.value ? '已收藏' : '已取消收藏',
    icon: 'success'
  })
}

const handleShare = () => {
  uni.showToast({
    title: '分享功能开发中...',
    icon: 'none'
  })
}

const handleGoHome = () => {
  uni.reLaunch({ url: '/pages/yjyny/home/index' })
}

const handleGoList = () => {
  uni.reLaunch({ url: '/pages/yjyny/service/list' })
}

const handleContact = () => {
  // TODO: 显示完整联系方式或跳转到聊天页面
  uni.showModal({
    title: '联系方式',
    content: `联系人：${serviceDetail.value.contact.name}\n电话：${serviceDetail.value.contact.phone}`,
    confirmText: '拨打电话',
    success: (res) => {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: serviceDetail.value.contact.phone.replace(/\*/g, '8')
        })
      }
    }
  })
}

const handleViewSimilar = (item) => {
  uni.redirectTo({
    url: `/pages/yjyny/service/detail?id=${item.id}`
  })
}
</script>

<style lang="scss" scoped>
.service-detail-page {
  min-height: 100vh;
  background-color: #f9fafb;
  padding-bottom: 160rpx;
}

// 顶部导航栏
.page-header {
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 2rpx solid #f3f4f6;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
}

.back-btn {
  width: 64rpx;
  height: 64rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.back-btn:active {
  background-color: #f3f4f6;
}

.header-title {
  flex: 1;
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
  text-align: center;
  margin: 0 32rpx;
}

.header-actions {
  display: flex;
  gap: 16rpx;
}

.action-btn {
  width: 64rpx;
  height: 64rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.action-btn:active {
  background-color: #f3f4f6;
}

// 内容滚动区
.content-scroll {
  height: calc(100vh - 120rpx - 160rpx);
}

// 图片轮播
.image-section {
  position: relative;
  width: 100%;
  height: 450rpx;
  background-color: #000000;
}

.image-swiper {
  width: 100%;
  height: 100%;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.image-counter {
  position: absolute;
  bottom: 24rpx;
  right: 24rpx;
  padding: 8rpx 16rpx;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 8rpx;
}

.counter-text {
  font-size: 22rpx;
  color: #ffffff;
}

// 服务基本信息
.info-section {
  padding: 32rpx;
}

.info-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #f3f4f6;
}

.info-main {
  margin-bottom: 24rpx;
}

.service-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #1f2937;
  line-height: 1.4;
  margin-bottom: 16rpx;
}

.tag-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.tag {
  padding: 10rpx 20rpx;
  border-radius: 16rpx;
  font-size: 22rpx;
  font-weight: 500;
  
  &.tag-category {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
  }
  
  &.tag-verified {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
  }
}

.service-desc {
  display: block;
  font-size: 28rpx;
  color: #6b7280;
  line-height: 1.6;
}

.info-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24rpx;
  border-top: 2rpx solid #f3f4f6;
}

.price-section {
  flex: 1;
}

.price {
  font-size: 48rpx;
  font-weight: bold;
  color: #10b981;
}

.stats-row {
  display: flex;
  align-items: center;
  gap: 32rpx;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 24rpx;
  color: #9ca3af;
}

// 通用卡片
.content-section,
.area-section,
.contact-section {
  padding: 0 32rpx 32rpx;
}

.section-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #f3f4f6;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
}

.content-body {
  font-size: 28rpx;
  line-height: 1.6;
}

.content-text {
  word-break: break-all;
}

.area-text {
  display: block;
  font-size: 28rpx;
  color: #6b7280;
  line-height: 1.6;
}

// 联系方式
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.contact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  background-color: #f9fafb;
  border-radius: 24rpx;
}

.contact-icon {
  width: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-info {
  flex: 1;
  margin-left: 24rpx;
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 22rpx;
  color: #9ca3af;
  margin-bottom: 8rpx;
}

.info-value {
  font-size: 28rpx;
  font-weight: 500;
  color: #1f2937;
}

.privacy-tip {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
  padding: 24rpx;
  background-color: rgba(245, 158, 11, 0.1);
  border: 2rpx solid rgba(245, 158, 11, 0.2);
  border-radius: 24rpx;
}

.tip-icon {
  flex-shrink: 0;
  margin-top: 4rpx;
}

.tip-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tip-title {
  font-size: 24rpx;
  font-weight: 500;
  color: #d97706;
  margin-bottom: 8rpx;
}

.tip-desc {
  font-size: 22rpx;
  color: #92400e;
  line-height: 1.5;
}

// 相似服务推荐
.recommend-section {
  padding: 0 32rpx 32rpx;
}

.recommend-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.recommend-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
}

.recommend-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.recommend-item {
  display: flex;
  gap: 24rpx;
  padding: 24rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #f3f4f6;
  transition: all 0.3s;
}

.recommend-item:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.item-image {
  width: 128rpx;
  height: 128rpx;
  border-radius: 16rpx;
  flex-shrink: 0;
}

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.item-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-desc {
  font-size: 24rpx;
  color: #9ca3af;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-price {
  font-size: 28rpx;
  font-weight: bold;
  color: #10b981;
}

// 底部安全区
.safe-bottom {
  height: 32rpx;
}

// 底部操作栏
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top: 2rpx solid #f3f4f6;
  padding: 32rpx;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.04);
  z-index: 20;
}

.bar-inner {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.icon-btn {
  width: 96rpx;
  height: 96rpx;
  border: 2rpx solid #e5e7eb;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.icon-btn:active {
  background-color: #f3f4f6;
}

.contact-btn {
  flex: 1;
  height: 96rpx;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
}
</style>

